import React, { Component } from 'react';
import { View, StyleSheet, Dimensions, Picker } from 'react-native'
import { Container, Content, List, ListItem, Text, Body, Icon, Spinner } from 'native-base'
import Collapsible from 'react-native-collapsible';
import { NavigationActions } from 'react-navigation';
import { connect } from 'react-redux';
import course from '../../net/course'
const { width, height } = Dimensions.get('window');

class course_Term extends Component {
     static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.title,
    });
    constructor(props) {
        super(props);
        this.state = {
            selectedItem: -1,
            terminfo: null,
            courseinfo: null,
            allterm:null
        }
    }
    async componentWillMount() {
        let cs=new course();
        let resultData=await cs.get_term();
        this.setState({ allterm: resultData });
        this.fetchData(this.state.terminfo);
    }
    async fetchData(value) {
        const { morecourseid } = this.props;
        let cs = new course();
        let resultData = await cs.get_more_course_info(morecourseid, value);
        if (resultData == undefined) {
            this.setState({ courseinfo: 'nocourse' });
        } else if (this.state.courseinfo != resultData && resultData.length > 0) {
            this.setState({ courseinfo: resultData });
        }

    }
    render_content(l) {
        const { setCourseInfo } = this.props;
        if (l === 'nocourse') {
            return (
                <ListItem style={StyleSheet.flatten(styles.mainList)}>
                    <Text>暂无信息</Text>
                </ListItem>
            )
        }
        return l.map((v, i) => {
            return (
                <ListItem key={i} button
                    style={StyleSheet.flatten(styles.mainList)}
                    onPress={() => {
                        setCourseInfo({
                            type: 'GetCourseIdSuccess',
                            payload: {
                                courseid: v.id,
                                chiefTeacherName: v.chiefTeacherName,
                                coursetitle: v.title
                            }
                        });
                        //this.props.navigation.dispatch('CourseInfo');
                        this.props.navigation.navigate('MoreCourseInfo', { title: v.title });

                    }}
                >
                    <Icon name="ios-person" style={{ opacity: 0.6, paddingRight: 8 }} />
                    <Text>{v.chiefTeacherName}</Text>
                </ListItem>
            );
        })
    }
    renderLoadingView() {
        return (
            <Container>
                <Content>
                    <Spinner color='green' />
                </Content>
            </Container>
        );
    }
    render_term(l) {
        return l.map((v, i) => {
            return (
                <Picker.Item key={i} 
                    label={v.termname} value={v.termcode}
                />
                
            );
        })
    }
    render() {
        if (!this.state.courseinfo) {
            return this.renderLoadingView();
        }
        return (
            <Content>
                <View style={StyleSheet.flatten(styles.titlestyle)}>
                    <Text style={StyleSheet.flatten(styles.textStyle)}>请选择学期:</Text>
                </View>
                <Picker
                    mode={'dialog'}
                    selectedValue={this.state.terminfo}
                    onValueChange={(value) => {
                        this.setState({ terminfo: value });
                        this.fetchData(value);
                    }
                    }
                    style={{ marginLeft: 20, }}
                >
                    {this.render_term(this.state.allterm)}     
                </Picker>

                <View style={StyleSheet.flatten(styles.titlestyle)}>
                    <Text style={StyleSheet.flatten(styles.textStyle)}>授课教师:</Text>
                </View>

                <List>
                    {this.render_content(this.state.courseinfo)}
                </List>

            </Content>
        );
    }
}
const styles = StyleSheet.create({
    mainList: {
        height: 40,
        marginRight: 0,
        marginLeft: 0,
        marginTop: 1,
        paddingBottom: 10,
        paddingLeft: 30,
        paddingRight: 20,
        backgroundColor: 'white',
        borderBottomWidth: 0.5,
        borderBottomColor: "#cac0c0",
    },
    titlestyle: {
        height: 40,
        marginRight: 0,
        marginLeft: 0,
        marginTop: 2,
        paddingTop: 10,
        paddingBottom: 5,
        paddingLeft: 10,
        backgroundColor: 'white',
        borderBottomWidth: 0.3,
        borderBottomColor: "#cac0c0",

    },
    textStyle: {
        fontSize: 17,
        color: '#353535',
    },

});
function mapStateToProps(state) {
    return { morecourseid: state.course.morecourseid }
}

function mapDispatchToProps(dispatch) {
    return {
        setCourseInfo: (state) => dispatch(state)
    }
}

const PageCourseTerm = connect(
    mapStateToProps,
    mapDispatchToProps
)(course_Term)
export default PageCourseTerm;